<template>
  <div v-if="isTrue">
    <el-form
      :model="form"
      :rules="rules"
      ref="basicInfo"
      label-width="160px"
      class="ccui-form"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单编号：" prop="orderNo">
            <el-input v-model="form.orderNo" disabled />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="订单名称：" prop="orderName">
            <el-input
              type="text"
              v-model.trim="form.orderName"
              placeholder="请输入订单名称"
              maxlength="128"
              show-word-limit
              @blur="handleTrim('orderName')"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="填报单位：" prop="reportInOrgId">
            <el-select
              v-model="form.reportInOrgId"
              placeholder="请选择填报单位"
              @change="changeReportInOrgId"
              :disabled="form.commonBool"
            >
              <el-option
                v-for="item in reportOptions"
                :key="item.orgId"
                :label="item.name"
                :value="item.orgId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="供应商名称：" prop="partyBName">
            <el-input v-model="form.partyBName" disabled />
            <!--            <el-button plain type="single-number" @click="getSuppliers"-->
            <!--              >选择-->
            <!--            </el-button>-->
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="合同编号：" prop="contractCode">
            <div style="display: flex">
              <el-input v-model="form.contractCode" disabled />
              <!--            <el-button plain type="single-number" @click="getContractName"-->
              <!--              >选择-->
              <!--            </el-button>-->
              <el-button @click="clickBtn" plain type="single-number">
                选择
              </el-button>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="合同名称：">
            <el-input v-model="form.contractName" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="分类名称：" prop="thirdCategoriesOfName">
            <el-input v-model="form.thirdCategoriesOfName" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商联系人：" prop="contractPerson">
            <el-input
              maxlength="20"
              v-model="form.contractPerson"
              placeholder="请输入供应商联系人"
              show-word-limit
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <!--          海外15-->
          <el-form-item label="供应商联系人手机号：" prop="contractPersonTel">
            <el-input
              maxlength="15"
              v-model="form.contractPersonTel"
              placeholder="请输入供应商联系人手机号"
              show-word-limit
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="编制人：" prop="compileUser">
            <el-input v-model="form.compileUser" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="订单发出时间：" prop="orderDeliveryTime">
            <el-input
              v-model="orderDeliveryTime1"
              :disabled="!orderDeliveryTimeBool"
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注：" prop="remark">
            <el-input
              class="remarkClass"
              resize="both"
              type="textarea"
              :rows="5"
              placeholder="请输入备注说明"
              maxlength="1000"
              show-word-limit
              v-model="form.remark"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!--    选择供应商单选框720弃用-->
    <!--    <el-single-select-->
    <!--      :dataObj="singleSelectData"-->
    <!--      :prop="singleSelectColumn"-->
    <!--      :total="singleSelectInput.singleSelectPageTotal"-->
    <!--      @confirm="confirm"-->
    <!--      :page-sizes="[10, 20, 50, 100, 200, 500]"-->
    <!--      @handleSizeChange="handleSizeChange"-->
    <!--      @handleCurrentChange="handleCurrentChange"-->
    <!--      :dialogVisible.sync="dialogVisible"-->
    <!--      ref="aabb"-->
    <!--      title="供应商查询"-->
    <!--    >-->
    <!--      <template slot="dialogTop">-->
    <!--        <div class="dialog-input">-->
    <!--          <span class="label">供应商名称：</span>-->
    <!--          <el-input-->
    <!--            placeholder="请输入供应商名称"-->
    <!--            v-model.trim="singleSelectInput.partyBName"-->
    <!--          />-->
    <!--        </div>-->
    <!--        <div class="dialog-input">-->
    <!--          <span class="label">统一社会信用代码：</span>-->
    <!--          <el-input-->
    <!--            placeholder="请输入统一社会信用代码"-->
    <!--            v-model.trim="singleSelectInput.supplierCode"-->
    <!--          />-->
    <!--        </div>-->
    <!--        <div style="width: 100%; display: flex; justify-content: center">-->
    <!--          <el-button-->
    <!--            size="mini"-->
    <!--            type="primary-font-mini"-->
    <!--            @click="singleSelectSearch"-->
    <!--            >搜索-->
    <!--          </el-button>-->

    <!--          <el-button size="mini" type="default-mini" @click="singleSelectReset"-->
    <!--            >重置-->
    <!--          </el-button>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--    </el-single-select>-->
    <!--    合同弹窗-->
    <codeNumber
      ref="codeNumber"
      :reportInOrgId="form.reportInOrgId"
      @inventoryConfirm="confirmTrue"
      :isTrue="false"
    ></codeNumber>
    <el-single-select
      :dataObj="contractOptions"
      :prop="singleSelectColumnContract"
      :total="singleSelectInputContract.singleSelectPageTotal"
      @confirm="confirmTrue"
      :page-sizes="[10, 20, 50, 100, 200, 500]"
      @handleSizeChange="handleSizeChangeContract"
      @handleCurrentChange="handleCurrentChangeContract"
      :dialogVisible.sync="dialogVisibleContract"
      ref="aabb"
      title="合同查询"
    >
      <template slot="dialogTop">
        <div class="dialog-input">
          <span class="label">合同编号：</span>
          <el-input
            placeholder="请输入合同编号模糊查询"
            v-model="singleSelectInputContract.contractCode"
          />
        </div>
        <div class="dialog-input">
          <span class="label">合同名称：</span>
          <el-input
            placeholder="请输入合同名称模糊查询"
            v-model="singleSelectInputContract.contractName"
            @blur="singleTrim('contractName')"
          />
        </div>
        <div class="dialog-input">
          <span class="label">签订单位：</span>
          <el-input
            placeholder="请输入签订单位模糊查询"
            v-model="singleSelectInputContract.partyAName"
          />
        </div>
        <div class="dialog-input">
          <span class="label">供应商：</span>
          <el-input
            placeholder="请输供应商模糊查询"
            v-model="singleSelectInputContract.partyBName"
          />
        </div>
        <div style="width: 100%; display: flex; justify-content: center">
          <el-button
            size="mini"
            type="primary-font-mini"
            @click="singleSelectSearchContract"
            >搜索
          </el-button>

          <el-button
            size="mini"
            type="default-mini"
            @click="singleSelectResetContract"
            >重置
          </el-button>
        </div>
      </template>
    </el-single-select>
  </div>
</template>

<script>
import {
  listUserPartJobComInfo,
  listSmpPcConcSupplierPage,
  listSmpPcConcByPartyBId,
  getSmpPcConcMatListById
} from "../api/orderEntry";
import axios from "axios";
import { showLoading } from "@/basa/utils/public";
import { addUrlPerFix } from "@/basa/utils/index";
import codeNumber from "./codeNumber";

export default {
  name: "basicInfo",
  components: {
    codeNumber
  },
  props: {
    thirdCategories: Object
  },
  watch: {
    // 关闭弹框时重置搜索项
    dialogVisible: {
      handler(item) {
        if (item === false) {
          // 清空搜索项
          this.singleSelectReset();
        }
      }
    },
    // dialogVisibleContract: {
    //   handler(item) {
    //     if (item === false) {
    //       this.singleSelectResetContract();
    //     }
    //   }
    // },
    thirdCategories(item) {
      this.form.thirdCategoriesOfName = item.thirdCategoriesOfName;
      this.form.thirdCategoriesOfCode = item.thirdCategoriesOfCode;
    },
    reportOrgId: {
      handler(item) {
        if (item) {
          console.log("改变填报单位id：", item);
          this.$emit("clearTable", item);
          /*// 填报单位更改使用orgId去调用供应商列表数据
          this.listSmpPcConcSupplierPage(item);*/
          // 填报单位更改使用orgId去调用合同列表数据
          console.log("此时的填报单位id", this.reportOrgId);
          this.listSmpPcConcByPartyBId();
        }
      },
      immediate: true
    },
    // "form.partyBId": {
    //   handler(n) {
    //     if (n) this.listSmpPcConcByPartyBId(n);
    //   },
    //   immediate: true
    // },
    "form.pcConcId": {
      handler(n) {
        // 传至下方表格用于调用物资合同list
        if (n) {
          this.$emit("postPconcId", n);
          getSmpPcConcMatListById({ concId: n })
            .then(res => {
              this.form.contractPerson = res.data.data[0].contractPerson;
              this.form.contractPersonTel = res.data.data[0].contractPersonTel;
            })
            .catch(e => {
              console.log(e);
            });
        }
      },
      immediate: true
    },
    //切换供应商清欢合同编码与名称
    "form.partyBName": {
      handler: function(val) {
        // if (this.form.contractCode) {
        //   this.form.contractCode = "";
        //   this.form.contractName = "";
        // }
      },
      deep: true
    }
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else {
        // const reg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
        const reg = /^\d{11,}$/;
        if (reg.test(value)) {
          callback();
        } else {
          return callback(new Error("请输入正确的手机号"));
        }
      }
    };
    return {
      form: {
        orderNo: "", // 订单编号
        orderName: "", // 订单名称
        contractPerson: "", // 联系人
        contractPersonTel: "", // 联系人电话
        thirdCategoriesOfName: "",
        partyBName: "",
        // reportOrgDeptId: "0", // 填报部门Id
        // reportOrgDeptName: "填报部门", // 填报部门
        reportInOrgId: "",
        contractName: "",
        contractCode: "",
        partyBId: "",
        pcConcId: "",
        orderDeliveryTime: "",
        remark: "", // 备注
        commonBool: false
      },
      formLoading: null,
      isTrue: false,
      oldContractCode: "",
      oldPartyBId: "",
      orderDeliveryTime1: "",
      reportOrgId: null,
      rules: {
        reportInOrgId: [{ required: true, message: "请选择填报单位" }],
        orderName: [{ required: true, message: "请输入订单名称" }],
        contractCode: [{ required: true, message: "请选择合同编号" }],
        // partyBName: [{ required: false, message: "请选择供应商名称" }],
        contractPerson: [{ required: true, message: "请输入供应商联系人" }],
        contractPersonTel: [
          { validator: checkPhone, required: true, trigger: "change" }
        ]
      },
      reportOptions: [], // 填报单位
      contractOptions: [], // 合同名称
      // 供应商弹窗Bool
      dialogVisible: false,
      // 合同编码
      dialogVisibleContract: false,
      // 供应商表格数据
      singleSelectData: [],
      // 供应商弹窗表头
      singleSelectColumn: [
        { prop: "partyBName", label: "供应商名称" },
        { prop: "supplierCode", label: "统一社会信用代码" }
      ],
      // 合同编码
      singleSelectColumnContract: [
        { prop: "contractCode", label: "合同编号" },
        { prop: "contractName", label: "合同名称" },
        { prop: "partyAName", label: "签订单位" },
        { prop: "partyBName", label: "供应商" }
      ],
      // 供应商高级搜索参数
      singleSelectInput: {
        pageNo: 1, // 分页页码
        pageSize: 20 // 分页每页显示多少数据
      },
      // 合同高级搜索参数
      singleSelectInputContract: {
        pageNo: 1, // 分页页码
        pageSize: 20 // 分页每页显示多少数据
      },
      orderDeliveryTimeBool: this.$route.params.id
    };
  },
  methods: {
    handleTrim(key) {
      this.$set(this.form, key, this.form[key].replace(/(^\s*)|(\s*)$/g, ""));
    },
    singleTrim(key) {
      this.$set(
        this.singleSelectInputContract,
        key,
        this.singleSelectInputContract[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    clickBtn() {
      if (
        this.$refs["codeNumber"].reportInOrgId &&
        this.$refs["codeNumber"].reportInOrgId != ""
      ) {
        this.$refs["codeNumber"].dialogTableVisibletextarea = true;
        this.$refs["codeNumber"].getList();
      } else {
        this.$message({
          message: "请先选择填报单位",
          type: "error",
          duration: 2000,
          ccuiCustom: true
        });
      }
    },
    // 更换tel
    handleTel(data) {
      console.log("传过来的手机号", data);
    },
    // 填报单位
    changeReportInOrgId(val) {
      console.log("调用切换填报单位方法", val);
      this.form.reportInOrgName = this.reportOptions.find(e => {
        return e.orgId === val;
      }).name;
      console.log("重置前的填报单位名称", this.form.reportInOrgName);
      if (this.form.contractName) {
        this.form.partyBName = "";
        this.form.contractName = "";
        this.form.contractCode = "";
        this.form.thirdCategoriesOfName = "";
        this.form.contractPerson = "";
        this.form.contractPersonTel = "";
        this.contractOptions = [];
        this.$nextTick(() => {
          this.$refs.basicInfo.clearValidate([
            "contractCode",
            "contractPerson",
            "contractPersonTel"
          ]);
          this.$emit("clear-table", "清空tablelist数据");
        });
      }
      this.reportOrgId = val;
    },
    // 初始化
    init() {
      this.getUserInfo();
    },
    // 编制人信息
    getUserInfo() {
      axios
        .post(
          addUrlPerFix(process.env.VUE_APP_BASEP_URL) +
            "/apis/basap/getUserInfo",
          {}
        )
        .then(res => {
          // this.form.compileUserId = 取登陆人Id
          this.form.compileUserPhone = res.data.data.userInfo.mobile;
          this.form.compileUser = res.data.data.userInfo.name;
          let openId = res.data.data.userInfo.openId;
          this.listUserPartJobComInfo(openId);
        });
    },
    // 填报单位获取
    listUserPartJobComInfo(id) {
      this.formLoading = showLoading();
      let params = {
        openIds: [id]
      };
      listUserPartJobComInfo(params).then(res => {
        this.reportOptions = res.data.data[id];
        console.log("编号", this.reportOptions);
        // 默认展示填报单位第一项（登录人所在单位）
        if (!this.$route.params.id) {
          this.form.reportInOrgName = this.reportOptions[0].name;
          this.form.reportInOrgId = this.reportOptions[0].orgId;
          this.reportOrgId = this.reportOptions[0].orgId;
        }
        this.isTrue = true;
        this.formLoading.close();
        // 编辑的时候查看是否为0,同时获取供应商列表
        // if (this.form.reportInOrgId) {
        //   this.listSmpPcConcSupplierPage(this.form.reportInOrgId);
        // }
      });
    },
    // 供应商列表
    listSmpPcConcSupplierPage(id) {
      this.singleSelectInput.reportOrgId = id;
      console.log("供应商搜索条件", this.singleSelectInput);
      this.singleSelectInput.pageNo = 1;
      listSmpPcConcSupplierPage(this.singleSelectInput).then(res => {
        this.singleSelectInput.pageNo = res.data.data.pageNo;
        this.singleSelectInput.singleSelectPageTotal =
          res.data.data.recordsTotal;
        console.log("供应商列表数据", res.data.data);
        this.singleSelectData = res.data.data.rows;
      });
    },
    // 供应商弹框确定
    confirm(val) {
      // 改变供应商时如果有不是原来供应商的合同则置空
      if (val.partyBId !== this.oldPartyBId) {
        this.form.contractName = "";
        this.form.contractCode = "";
      }
      // 确定时候处理供应商id  this.form.partyBId
      this.form.partyBId = val.partyBId;
      this.form.partyBName = val.partyBName;
      this.oldPartyBId = val.partyBId;
      this.form.companyOrgId = val.companyOrgId;
      // this.form.contractPerson = val.contractPerson;
      // this.form.contractPersonTel = val.contractPersonTel;
      // this.listSmpPcConcByPartyBId(this.form.partyBId)；
    },
    // 合同弹框确定
    confirmTrue(val) {
      console.log("编辑为啥没有数据", val, 1111, this.oldContractCode);
      if (
        this.oldContractCode !== "" &&
        this.oldContractCode !== val.contractCode
      ) {
        // 让tablelist的tableData清空
        this.$emit("clear-table", "清空tablelist数据");
        this.form.thirdCategoriesOfName = "";
      }
      this.$bus.$emit("postContractCode", val.contractCode);
      this.oldContractCode = val.contractCode;
      this.form.contractCode = val.contractCode;
      this.form.contractName = val.contractName;
      this.form.partyBId = val.partyBId;
      this.form.partyBName = val.partyBName;
      this.oldPartyBId = val.partyBId;
      this.form.companyOrgId = val.companyOrgId;
      // this.form.contractPerson = val.contractPerson;
      // this.form.contractPersonTel = val.contractPersonTel;
      this.form.pcConcId = val.id;
      this.singleSelectResetContract();
    },
    // 合同列表
    listSmpPcConcByPartyBId() {
      this.singleSelectInputContract.reportOrgId = this.reportOrgId;
      console.log(
        "填报单位供应商 -- 填报单位 》》》查合同",
        this.singleSelectInputContract
      );
      // delete this.singleSelectInputContract.partyBId;
      listSmpPcConcByPartyBId(this.singleSelectInputContract).then(res => {
        this.contractOptions = res.data.data.rows;
        this.singleSelectInputContract.singleSelectPageTotal =
          res.data.data.recordsTotal;
        this.singleSelectInputContract.pageNo = res.data.data.pageNo;
        console.log("采购清单列表", this.contractOptions);
      });
    },
    getTime() {
      return new Date(+new Date() + 8 * 3600 * 1000)
        .toJSON()
        .substr(0, 19)
        .replace("T", " ");
    },
    // 签订地点默认展示今天
    getNowFormatDate() {
      let date = new Date();
      let seperator1 = "-";
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      let currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
    },
    // 打开供应商弹框
    getSuppliers() {
      if (this.form.reportInOrgId) {
        this.dialogVisible = true;
        if (!this.form.partyBName) {
          this.oldPartyBId = this.form.partyBId;
        }
        if (this.oldContractCode === "" && this.form.contractName !== "") {
          this.oldContractCode = this.form.contractName;
        }
      } else {
        this.$message({
          message: "请选择填报单位",
          type: "error",
          duration: 2000,
          ccuiCustom: true
        });
      }
    },
    // 打开合同编码弹框
    getContractName() {
      if (this.form.reportInOrgId) {
        this.dialogVisibleContract = true;
      } else {
        this.$message({
          message: "请选择填报单位",
          type: "error",
          duration: 2000,
          ccuiCustom: true
        });
      }
    },
    // 更改供应商页面大小
    handleSizeChange(val) {
      this.singleSelectInput.pageSize = val;
      console.log("更改供应商页面大小", this.singleSelectInput);
      listSmpPcConcSupplierPage(this.singleSelectInput).then(res => {
        this.singleSelectInput.pageNo = res.data.data.pageNo;
        this.singleSelectInput.singleSelectPageTotal =
          res.data.data.recordsTotal;
        console.log("供应商列表数据", res.data.data);
        this.singleSelectData = res.data.data.rows;
      });
      // this.getSuppliers();
    },
    // 更改供应商当前页面
    handleCurrentChange(val) {
      this.singleSelectInput.pageNo = val;
      listSmpPcConcSupplierPage(this.singleSelectInput).then(res => {
        this.singleSelectInput.pageNo = res.data.data.pageNo;
        this.singleSelectInput.singleSelectPageTotal =
          res.data.data.recordsTotal;
        console.log("供应商列表数据", res.data.data);
        this.singleSelectData = res.data.data.rows;
      });
    },
    // 更改合同页面大小
    handleSizeChangeContract(val) {
      this.singleSelectInputContract.pageSize = val;
      console.log("更改合同页面大小", this.singleSelectInputContract);
      listSmpPcConcByPartyBId(this.singleSelectInputContract).then(res => {
        this.singleSelectInputContract.pageNo = res.data.data.pageNo;
        this.singleSelectInputContract.singleSelectPageTotal =
          res.data.data.recordsTotal;
        console.log("合同列表数据", res.data.data);
        this.contractOptions = res.data.data.rows;
      });
    },
    // 更改合同当前页面
    handleCurrentChangeContract(val) {
      this.singleSelectInputContract.pageNo = val;
      this.listSmpPcConcByPartyBId(this.form.partyBId);
      // listSmpPcConcByPartyBId(this.singleSelectInputContract).then(res => {
      //   this.singleSelectInputContract.pageNo = res.data.data.pageNo;
      //   this.singleSelectInputContract.singleSelectPageTotal =
      //     res.data.data.recordsTotal;
      //   console.log("合同列表数据", res.data.data);
      //   this.contractOptions = res.data.data.rows;
      // });
      // this.getSuppliers();
    },
    // 供应商弹框搜索
    singleSelectSearch() {
      this.listSmpPcConcSupplierPage(this.reportOrgId);
    },
    // 合同弹框搜索
    singleSelectSearchContract() {
      this.listSmpPcConcByPartyBId(this.form.partyBId);
    },
    // 供应商弹窗重置
    singleSelectReset() {
      // this.singleSelectInput.partyBName = "";
      // this.singleSelectInput.supplierCode = "";
      this.singleSelectInput = {
        pageNo: 1, // 分页页码
        pageSize: 20 // 分页每页显示多少数据
      };
      this.listSmpPcConcSupplierPage(this.reportOrgId);
    },
    // 合同弹窗重置
    singleSelectResetContract() {
      // this.singleSelectInputContract.partyBName = "";
      // this.singleSelectInputContract.partyAName = "";
      // this.singleSelectInputContract.contractName = "";
      // this.singleSelectInputContract.contractCode = "";
      this.singleSelectInputContract = {
        pageNo: 1, // 分页页码
        pageSize: 20 // 分页每页显示多少数据
      };
      let params = {
        ...this.singleSelectInputContract,
        reportOrgId: this.reportOrgId
      };
      listSmpPcConcByPartyBId(params).then(res => {
        this.singleSelectInputContract.pageNo = res.data.data.pageNo;
        this.singleSelectInputContract.singleSelectPageTotal =
          res.data.data.recordsTotal;
        this.contractOptions = res.data.data.rows;
        // this.form.contractPerson = res.data.data.rows[0].contractPerson;
        // this.form.contractPersonTel = res.data.data.rows[0].contractPersonTel;
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style scoped lang="scss">
/*/deep/ .el-form .el-input {*/
/*  width: 260px !important;*/
/*}*/
/deep/ .el-input {
  width: 260px;
}

/deep/ .el-button--single-number {
  width: 46px;
  margin-left: 10px;
  padding: 0 9px;
}

.remarkClass {
  width: calc(50% + 343px);
}

.dialog-input .label {
  display: inline-block;
  width: 126px;
  height: 30px;
  line-height: 30px;
  text-align: right;
}

/*.dialog-input.el-input {*/
/*  width: 260px !important;*/
/*}*/

/deep/
  .el-single-select
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-dialog-box {
  overflow: hidden !important;
}

/deep/ .el-table__body-wrapper {
  max-height: 330px !important;
}

/deep/ .el-single-select .el-dialog__wrapper .el-dialog .el-dialog__footer {
  padding: 0px 30px 17px 20px;
}
/*/deep/ .el-input__inner {*/
/*  -webkit-appearance: none;*/
/*  background-color: #fff;*/
/*  background-image: none;*/
/*  border-radius: 4px;*/
/*  border: 1px solid #ccc;*/
/*  -webkit-box-sizing: border-box;*/
/*  box-sizing: border-box;*/
/*  color: #4a4a4a;*/
/*  font-size: inherit;*/
/*  height: 30px;*/
/*  line-height: 1;*/
/*  outline: 0;*/
/*  padding-left: 8px;*/
/*  padding-right: 50px;*/
/*  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);*/
/*  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);*/
/*  width: 100%;*/
/*  word-break: break-all;*/
/*}*/
::v-deep {
  .el-input input {
    padding-right: 50px;
  }
}
</style>
